<!DOCTYPE html>
<html>
<body>
<template id="target-template">
<svg width="90" height="90">
<line x1="1" y1="2" x2="3" y2="4" class="target" />
</svg>
</template>
<script src="resources/interpolation-test.js"></script>
<script>
'use strict';

// Single transforms

assertAttributeInterpolation({
  property: 'transform',
  from: 'translate(10 20)',
  to: 'translate(30 60)'
}, [
  {at: -0.4, is: 'translate(2,4)'},
  {at: 0, is: 'translate(10 20)'},
  {at: 0.2, is: 'translate(14,28)'},
  {at: 0.6, is: 'translate(22,44)'},
  {at: 1, is: 'translate(30 60)'},
  {at: 1.4, is: 'translate(38,76)'}
]);

assertAttributeInterpolation({
  property: 'transform',
  from: 'scale(10 20)',
  to: 'scale(30 60)'
}, [
  {at: -0.4, is: 'scale(2 4)'},
  {at: 0, is: 'scale(10 20)'},
  {at: 0.2, is: 'scale(14 28)'},
  {at: 0.6, is: 'scale(22 44)'},
  {at: 1, is: 'scale(30 60)'},
  {at: 1.4, is: 'scale(38 76)'}
]);

assertAttributeInterpolation({
  property: 'transform',
  from: 'rotate(10 20 30)',
  to: 'rotate(40 80 160)'
}, [
  {at: -0.4, is: 'rotate(-2 -4 -22)'},
  {at: 0, is: 'rotate(10 20 30)'},
  {at: 0.2, is: 'rotate(16 32 56)'},
  {at: 0.6, is: 'rotate(28 56 108)'},
  {at: 1, is: 'rotate(40 80 160)'},
  {at: 1.4, is: 'rotate(52 104 212)'}
]);

assertAttributeInterpolation({
  property: 'transform',
  from: 'skewX(10)',
  to: 'skewX(20)'
}, [
  {at: -0.4, is: 'skewX(6)'},
  {at: 0, is: 'skewX(10)'},
  {at: 0.2, is: 'skewX(12)'},
  {at: 0.6, is: 'skewX(16)'},
  {at: 1, is: 'skewX(20)'},
  {at: 1.4, is: 'skewX(24)'}
]);

assertAttributeInterpolation({
  property: 'transform',
  from: 'skewY(10)',
  to: 'skewY(20)'
}, [
  {at: -0.4, is: 'skewY(6)'},
  {at: 0, is: 'skewY(10)'},
  {at: 0.2, is: 'skewY(12)'},
  {at: 0.6, is: 'skewY(16)'},
  {at: 1, is: 'skewY(20)'},
  {at: 1.4, is: 'skewY(24)'}
]);

// Distinct transforms

assertAttributeInterpolation({
  property: 'transform',
  from: 'translate(10 20)',
  to: 'rotate(30 40 50)'
}, [
  {at: -0.4, is: 'translate(10 20)'},
  {at: 0, is: 'translate(10 20)'},
  {at: 0.2, is: 'translate(10 20)'},
  {at: 0.6, is: 'rotate(30 40 50)'},
  {at: 1, is: 'rotate(30 40 50)'},
  {at: 1.4, is: 'rotate(30 40 50)'}
]);

assertAttributeInterpolation({
  property: 'transform',
  from: 'skewX(10)',
  to: 'skewY(20)'
}, [
  {at: -0.4, is: 'skewX(10)'},
  {at: 0, is: 'skewX(10)'},
  {at: 0.2, is: 'skewX(10)'},
  {at: 0.6, is: 'skewY(20)'},
  {at: 1, is: 'skewY(20)'},
  {at: 1.4, is: 'skewY(20)'}
]);

// Common list of transforms

assertAttributeInterpolation({
  property: 'transform',
  from: 'translate(110 20) scale(10 20) rotate(10 20 30)',
  to: 'translate(130 60) scale(30 60) rotate(40 80 160)'
}, [
  {at: -0.4, is: 'translate(102,4) scale(2 4) rotate(-2 -4 -22)'},
  {at: 0, is: 'translate(110 20) scale(10 20) rotate(10 20 30)'},
  {at: 0.2, is: 'translate(114,28) scale(14 28) rotate(16 32 56)'},
  {at: 0.6, is: 'translate(122,44) scale(22 44) rotate(28 56 108)'},
  {at: 1, is: 'translate(130 60) scale(30 60) rotate(40 80 160)'},
  {at: 1.4, is: 'translate(138,76) scale(38 76) rotate(52 104 212)'}
]);

// Distinct list of transforms

assertAttributeInterpolation({
  property: 'transform',
  from: 'translate(110 20) scale(10 20) skewX(10) rotate(10 20 30)',
  to: 'translate(130 60) scale(30 60) skewY(-30) rotate(40 80 160)'
}, [
  {at: -0.4, is: 'translate(110 20) scale(10 20) skewX(10) rotate(10 20 30)'},
  {at: 0, is: 'translate(110 20) scale(10 20) skewX(10) rotate(10 20 30)'},
  {at: 0.2, is: 'translate(110 20) scale(10 20) skewX(10) rotate(10 20 30)'},
  {at: 0.6, is: 'translate(130 60) scale(30 60) skewY(-30) rotate(40 80 160)'},
  {at: 1, is: 'translate(130 60) scale(30 60) skewY(-30) rotate(40 80 160)'},
  {at: 1.4, is: 'translate(130 60) scale(30 60) skewY(-30) rotate(40 80 160)'}
]);

assertAttributeInterpolation({
  property: 'transform',
  from: 'translate(110 20) scale(10 20) skewX(10)',
  to: 'translate(130 60) scale(30 60) skewX(-30) rotate(40 80 160)'
}, [
  {at: -0.4, is: 'translate(110 20) scale(10 20) skewX(10)'},
  {at: 0, is: 'translate(110 20) scale(10 20) skewX(10)'},
  {at: 0.2, is: 'translate(110 20) scale(10 20) skewX(10)'},
  {at: 0.6, is: 'translate(130 60) scale(30 60) skewX(-30) rotate(40 80 160)'},
  {at: 1, is: 'translate(130 60) scale(30 60) skewX(-30) rotate(40 80 160)'},
  {at: 1.4, is: 'translate(130 60) scale(30 60) skewX(-30) rotate(40 80 160)'}
]);

</script>
</body>
</html>
